<template>
	<!-- 话题列表项（适配搜索页） -->
	<view class="topic-item" @click="goTopicDetail(item)">
		<!-- 头像（可选） -->
		<image
			v-if="item.creator && item.creator.userPic"
			:src="item.creator.userPic"
			mode="aspectFill"
			class="avatar"
		></image>

		<!-- 话题内容 -->
		<view class="topic-content">
			<view class="title">#{{ item.topic || item.title || '未知话题' }}#</view>
			<view v-if="item.desc" class="desc">{{ item.desc }}</view>
			<view class="stats">
				<text>热度：{{ item.totalNum || 0 }}</text>
				<text class="ml-20">今日：{{ item.todayNum || 0 }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "TopicList",
	props: {
		item: {
			type: Object,
			default: () => ({})
		}
	},
	methods: {
		goTopicDetail(item) {
			this.$u.route({
				url: '/pages/news/news-topic-detail',
				params: item
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.topic-item {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #eee;

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.topic-content {
		flex: 1;
	}

	.title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.desc {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.stats {
		font-size: 22rpx;
		color: #999;
		margin-top: 10rpx;
	}
}
</style>